<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Title</title>
    <style>
        body{
            padding: 0px;
            margin: 0px;
        }
        .operatorBtn {
            width: 60px;height: 60px;
            background-color: #222222;
            position: fixed;
            margin-left: 2px;
            bottom: 2px;
            opacity:0.3;
            border-radius: 30px; /* 所有角都使用半径为5px的圆角，此属性为CSS3标准属性 */
            -moz-border-radius: 30px; /* Mozilla浏览器的私有属性 */
            -webkit-border-radius: 30px; /* Webkit浏览器的私有属性 */
            border-radius: 30px 30px 30px 30px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
            line-height: 60px;
            font-size: 24px;
            text-align: center;
            color: white;
        }
        .operatorBtn:hover{
            cursor: pointer;
        }

        .addTime{
            position: fixed;
            top: 0px;
            bottom: 0px;
            width: 450px;
            height: 100%;
            background-color: #888888;
            opacity: 0.95;
            display: none;
        }

        .okBtn,.cancelBtn{
            background-color: crimson;
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 40px;
            -moz-border-radius: 40px; /* Mozilla浏览器的私有属性 */
            -webkit-border-radius: 40px; /* Webkit浏览器的私有属性 */
            border-radius: 40px 40px 40px 40px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
            margin: 0px auto;
            margin-top:5px;
            padding: 10px;
            color: white;
        }
        .okBtn:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>

<div style="margin: 0px auto;width: 450px;">
    <canvas id="myCanvas" width="450" height="1000" ></canvas>
    <div id="operatorBtn" class="operatorBtn">+</div>
    <div class="addTime" id="addTime">
        <div id="closeBtn" style="position: fixed;color: #555555;margin: 10px;font-size:18px;margin-left: 410px;text-align:center;width: 30px;height: 30px;">×</div>
        <div style="margin-left: 0px;width: 100%;text-align: center;">
            <input id="addTimeInput" maxlength="10" placeholder="现在在干嘛呢？" style="height: 50px;border: none;border-radius: 2px;margin-top: 260px;padding-left: 10px;width: 300px;font-size: 24px;"/>
            <div class="okBtn" id="okBtn"><span>OK</span></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>
